<template>
	<view class="shopcard-box relative">
		<view class="shopcard-item relative" 
		v-if="commonConfigs && commonConfigs.domainFrontFileLink"
		:style="{
			backgroundImage: `url(${commonConfigs.domainFrontFileLink}/files/images/common/home-goods-item-bg.png)`
		}"
		@click="gooDetailPage(item.id)">
			<view class="flex flex-justify-content-center">
				<image :src="item.product_cover" class="goods-img" mode="heightFix"></image>
			</view>
			<view v-if="showNoticeTxtFun(item.product_name, 9)" class="flex mult-truncates items-center notices-txt">
				<uni-notice-bar
					class="uni-notice-bar font-hanserif-bold"
					background-color="transparent"
					color="#111111"
					:scrollable="true"
					:single="true"
					:text="showNoticeTxtFun(item.product_name, 9)"
					:speed="54"
				></uni-notice-bar>
			</view>
			<view v-else class="mult-truncates font-hanserif-bold relative product-name">
				{{ item.product_name }}
			</view>
			<view class="product-price relative font-hanserif-bold">
				
				<text class="price-txt" v-if="[3].indexOf(item.product_buy_type) !== -1">{{ item.product_price }}</text>
				<text v-if="[3].indexOf(item.product_buy_type) !== -1">元</text>
				
				<text class="price-txt" v-if="[5, 1].indexOf(item.product_buy_type) !== -1">{{ item.balance }}</text>
				<text v-if="[5, 1].indexOf(item.product_buy_type) !== -1">机能</text>
				
				<text class="price-txt" style="margin: 0 10rpx;" v-if="[3, 5].indexOf(item.product_buy_type) !== -1"> + </text>
				
				<text class="price-txt" v-if="[3, 5, 2].indexOf(item.product_buy_type) !== -1">{{ item.points }}</text>
				<text v-if="[3, 5, 2].indexOf(item.product_buy_type) !== -1">积分</text>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comShopCard',
		props: {
			item: Object
		},
		data() {
			return {};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		methods: {
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
			gooDetailPage(id){
				this.$emit('gooDetailPage',id)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.shopcard-box {
		color: #fff;
		margin-bottom: 20rpx;
	}
	
	.shopcard-item {
		width: 344rpx;
		height: 465rpx;
		background-size: 100% 100%;
		margin-bottom: 22rpx;
		.goods-img {
			width: 320rpx;
			height: 320rpx;
			margin-left: 12rpx;
			margin-top: 12rpx;
			margin-bottom: 12rpx;
			overflow: hidden;
		}
		.goods-tips {
			width: 110rpx;
			height: 110rpx;
			left: 0rpx;
			top: 0rpx;
		}
		.notices-txt {
			font-size: 28rpx;
			padding: 6rpx 35rpx 0;
		}
		.uni-notice-bar {
			flex: 1;
			height: 34rpx;
			font-size: 28rpx;
		}
		.product-name {
			height: 72rpx;
			// margin: 10rpx 0 6rpx;
			margin-bottom: 4rpx;
			// padding-top: 6rpx;
			// padding-left: 16rpx;
			padding: 0rpx  30rpx 0 16rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			width: 100%;
		}
		.product-price {
			padding-left: 16rpx;
			margin-top: 6rpx;
			font-size: 28rpx;
			color: #79F6FF;
			.price-txt {
				font-size: 28rpx;
			}
		}
	}
</style>
